<template>
	<view class="workDetails">
		<view class="top">
			<text class="title">{{info.title}}</text>
			<view class="num">
				<view class="left">
					<image :src="obtainImgUrl('icon/read.png')" mode="widthFix"></image>
					<text>{{info.view}}</text>
				</view>
				<view class="right">{{info.create_time}}</view>
			</view>
			<video v-if="info.isVideo" class="videoPlay" poster="" :src="info.videoSrc"  controls></video>
			<view class="content" ref="htmlContent" v-html="info.content">
			</view>
		</view>
	</view>
	
</template>

<script>
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	import {Base64} from '../../static/base64.min.js';
	import ShareIndex from '../../static/share.js';
	
	export default {
		mixins: [ShareIndex],
		data() {
			return {
				id: 0,
				info: {
					title: '',
					num : 0,
					isVideo: 0,
					videoSrc : '',
					content: '',
				},
			}
		},
		mounted() {
		  
		},
		methods: {
			getInfo() {
				var self = this;
				serve.request({
					url: '/article/article/view',
					data: {
						id:self.id,
					}
				}).then(res => {
					if(res.code == 200) {
						self.info=res.data;
						self.info.content = Base64.decode(self.info.content);
						self.info.content=self.info.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
						self.shareItem.title = this.info.title;
						self.shareItem.path = '/pages/index/workDetails?id='+self.info.id+'&shanhaiKey='+uni.getStorageSync('shanhaiKey');
						self.shareItem.imageUrl = this.info.cover;
						self.shareItem.linePaht = '/pages/index/workDetails';
						self.shareItem.query = 'id='+self.info.id+'&shanhaiKey='+uni.getStorageSync('shanhaiKey');
					} else {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									common.jump('article_list')
								}, 2000) 
							}
						})
					}
				});
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('article_list')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.workDetails {
		width: 100%;
		padding-bottom: 100upx;

		.top {
			padding: 56upx 30upx;
			border-bottom: 16upx #FBFBFD solid;

			.title {
				font-size: 36upx;
				font-weight: bold;
				color: rgba(60, 72, 104, 1);
			}

			.num {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 37upx 0upx 42upx;
				border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;

				.left {
					display: flex;
					align-items: center;
					font-size: 32upx;
					font-weight: bold;

					image {
						width: 36upx;
						height: 25upx;
						margin-right: 14upx;
					}
				}

				.right {
					font-size: 24upx;

					color: rgba(57, 72, 107, 0.5);
				}
			}

			.content {
				font-size: 28upx;
				padding-top: 42upx;
				line-height: 60upx;
				width: 650upx;
				margin-left: 25upx; 
				::v-deep {
				    img,p,span {
				       width: 100%;
					   line-height: 60upx;
				    }
				}
			}
		}
		.videoPlay {
			    width: 100%;
			    margin: 20rpx 0;
		}
		.like {
			display: flex;
			padding: 42upx 31upx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 16upx #FBFBFD solid;

			.left {
				display: flex;
				font-size: 24upx;
				align-items: center;

				.left_img {
					max-width: 420upx;
					padding-right: 40upx;
					height: 85upx;
					
					display: flex;
					flex-direction: row;
					overflow: hidden; 
					
					.zanlist{
						width: 40upx;
						height: 85upx;
						position: relative;  
					}
				}

				text {
					margin-left: 7upx;
				}
			}

			.right {
				position: relative;
				font-size: 28upx;
				color: rgba(57, 72, 107, 0.5);
				padding-right: 23upx;
			}

			.right::before {
				position: absolute;
				right: 0upx;
				top: 13upx;
				content: '';
				border: 1upx solid #CCCCCC;
				border-width: 0 1upx 1upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		.comment {
			padding-top: 48upx;
			margin-left: 27upx;

			.title {
				font-size: 24upx;
				font-family: Microsoft YaHei UI;
				font-weight: bold;
			}

			.item:last-child {
				border-bottom: none
			}

			.item {
				padding: 41upx 0upx;
				display: flex;
				border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;

				.left {
					image {
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
					}
				}

				.right {
					margin-left: 13upx;
					width: 625upx;

					.txt {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28upx;
						font-weight: bold;

						text:last-child {
							color: rgba(60, 72, 104, 0.5);
							font-size: 20upx;
							font-weight: 400;
						}
					}

					.txt1 {
						color: #8F96A9;
						font-size: 28upx;
						margin-top: 30upx;

						.name {
							font-weight: bold;
							color: #3C4868;
						}

						.del_btn {
							font-weight: bold;
							color: #FF0000;
						}
					}
				}
			}

		}
		
		.nocomment {
			font-size: 28upx;
			color: rgba(60, 72, 104, 0.5);
			width: 100%;
			padding: 87upx 0upx;
			text-align: center;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			background: #FFFFFF;
			bottom: 0;
			width: 100%;
			left: 0;
			height: 100upx;
			border-top: 1upx rgba(57, 72, 107, 0.1) solid;
			box-sizing: border-box;
			padding: 0upx 52upx 0upx 29upx;
			.bottom_input{
				display: flex;
				align-items: center;
				text{
					font-size: 32upx;
					margin-left: 20upx;
				}
			}

			image {
				width: 40upx;
				height: 34upx;
			}

			input {
				width: 408upx;
				height: 64upx;
				background: rgba(60, 72, 104, 0.1);
				border-radius: 32upx;
				font-size: 26upx;
				padding-left: 52upx;
			}
		}
	}
</style>
